<script setup lang="ts">
import {getCasesDetailById} from "@/api/cases";

const {params} = useRoute()

const startCard = () => {
  const
      HTML = document.documentElement;
  let screenWidth = HTML.clientWidth,
      screenHeight = HTML.clientHeight,
      isPortrait = window.matchMedia('(max-aspect-ratio: 11/10)').matches

  const sections = document.querySelectorAll('.project-content');
  sections.forEach(section => {
    const stickyWrapper = section,
        stickyContent = section.querySelector('.sticky-content'),
        wrapper = section.querySelector('.section-wrapper'),
        cards = wrapper!.querySelectorAll('.section-card'),
        cardsNumber = cards.length,
        cardWidth = cards[0].clientWidth,
        cardMargin = Number(window.getComputedStyle(cards[1]).getPropertyValue('margin-right').slice(0, -2)),
        swiperOffset =
            wrapper!.getBoundingClientRect().left * 2 + cardWidth * cardsNumber - (cardMargin * 1.5) * (cardsNumber - 1) - screenWidth;
    // cardMargin需要调整到合适
    gsap.to(wrapper, {
      onUpdate: () => {

      },
      scrollTrigger: {
        trigger: stickyWrapper,
        start: 'top 1rem',
        end: 'bottom 100%',
        scrub: 0,
      },
      ease: 'none',
      x: -swiperOffset,
    });
  });
}
const startScenariosCard = () => {
  const
      HTML = document.documentElement;
  let screenWidth = HTML.clientWidth,
      screenHeight = HTML.clientHeight,
      isPortrait = window.matchMedia('(max-aspect-ratio: 11/10)').matches

  const sections = document.querySelectorAll('.project-app-scenarios');
  sections.forEach(section => {
    const stickyWrapper = section,
        stickyContent = section.querySelector('.sticky-content'),
        wrapper = section.querySelector('.section-wrapper'),
        cards = wrapper!.querySelectorAll('.section-card'),
        cardsNumber = cards.length,
        cardWidth = cards[0].clientWidth,
        cardMargin = Number(window.getComputedStyle(cards[1]).getPropertyValue('margin-right').slice(0, -2)),
        swiperOffset =
            cardWidth * cardsNumber - (cardMargin * 0.5) * (cardsNumber - 1) - wrapper!.getBoundingClientRect().left;
    // cardMargin需要调整到合适
    // console.log(wrapper!.getBoundingClientRect().left, cardWidth, cardMargin, screenWidth)
    gsap.to(wrapper, {
      onUpdate: () => {

      },
      scrollTrigger: {
        trigger: stickyWrapper,
        start: 'top 1rem',
        end: 'bottom 100%',
        scrub: 0,
      },
      ease: 'none',
      x: -swiperOffset,
    });
  });
}
const startValueCard = () => {
  const
      HTML = document.documentElement;
  let screenWidth = HTML.clientWidth,
      screenHeight = HTML.clientHeight,
      isPortrait = window.matchMedia('(max-aspect-ratio: 11/10)').matches

  const sections = document.querySelectorAll('.ht-cases-detail-project-value');
  sections.forEach(section => {
    const stickyWrapper = section,
        stickyContent = section.querySelector('.sticky-content'),
        wrapper = section.querySelector('.section-wrapper'),
        cards = wrapper!.querySelectorAll('.section-card'),
        cardsNumber = cards.length,
        cardWidth = cards[0].clientWidth,
        cardMargin = Number(window.getComputedStyle(cards[1]).getPropertyValue('margin-right').slice(0, -2)),
        swiperOffset =
            wrapper!.getBoundingClientRect().left + cardWidth * cardsNumber / 2 + (cardMargin * 1.1) * (cardsNumber / 2) - screenWidth;
    // cardMargin需要调整到合适
    let moveElement = document.getElementById('moveElement') as HTMLElement;

    gsap.to(wrapper, {

      scrollTrigger: {
        trigger: stickyWrapper,
        start: 'top 1rem',
        end: 'bottom 100%',
        scrub: 0,
        onUpdate: (self: { progress: number; }) => {
          if (allowGsapContinue.value) {
          translateX.value = self.progress
            // if(translateX.value*bottomLineWidth.value>mouseWidth.value){
            // }
            moveElement.style.transform = `translateX(${translateX.value * 10}rem)`;
            mousedownOffset.x = translateX.value * (bottomLineWidth.value - mouseWidth.value)
          } else {
            // moveElement.style.transform = 'translateX(' + mousedownOffset.x + 'px)';
          }
        },
      },
      ease: 'none',
      x: -swiperOffset,
    });
  });
}
const translateX = ref(0)
const isMouseActive = ref(false)
const bottomLineWidth = ref(0)
const mouseWidth = ref(0)
const allowGsapContinue = ref(true)

const originalPosition = reactive({
  x: 0,
  y: 0,
})
const valueDomOffsetTop = ref(0)

const mousedownOffset = reactive({
  x: 0,
  y: 0,
})
const casesDetail = ref({})
const asideDetail = ref({})

const getBottomLineWidth = () => {
  const mouseFather = document.documentElement.querySelector('.border-mouse') as HTMLElement
  const mouse = document.documentElement.querySelector('.border-mouse div') as HTMLElement
  let a = parseFloat(window.getComputedStyle(mouseFather, "after").width);
  bottomLineWidth.value = a //- mouse.clientWidth
  mouseWidth.value = mouse.clientWidth
}

const getCasesDetail = async () => {
  const {data} = await getCasesDetailById(params.id)
  data.caseDetails.projectContentList.forEach((i: { title: string; }) => {
    i.title = i.title.replaceAll(' 解决方案', '')
  })
  casesDetail.value = data.caseDetails
  asideDetail.value = data.lastCase
  setTimeout(()=>{
    initAnimation()
  },1300)
}

onMounted(() => {
  getCasesDetail()
})

function initAnimation(){
  gsap.registerPlugin(ScrollTrigger);

  // 设置起初x点
  setTimeout(()=>{
    getBottomLineWidth()
    startCard()
    startScenariosCard()
    startValueCard()
    valueMouseMoveHandle()
    const mouse = document.documentElement.querySelector('.border-mouse div') as HTMLElement
    const valueDom = document.documentElement.querySelector('.ht-cases-detail-project-value') as HTMLElement
    originalPosition.x = mouse.getBoundingClientRect().x
    valueDomOffsetTop.value = valueDom.getBoundingClientRect().y
  },200)

}

onUnmounted(() => {

})
const valueMouseMoveHandle = () => {

  $('.border-mouse div').mousedown(function (event1: MouseEvent) {
    isMouseActive.value = true
    allowGsapContinue.value = false
  })

  let moveElement = document.getElementById('moveElement') as HTMLElement;
  let currentDomHeight = document.querySelector('.ht-cases-detail-project-value') as HTMLElement
  const currentHeight = currentDomHeight.clientHeight / window.devicePixelRatio
  // 给元素注册鼠标按下事件
  moveElement.onmousedown = function (e) {
    isMouseActive.value = true
    allowGsapContinue.value = false
    let event = e || window.event;
    let mx = event.pageX;
    // 获取鼠标按下去的那一个点距离边框顶部和左侧的距离
    let point_x = event.offsetX + originalPosition.x;

    let baseX = mx
    document.onmousemove = function (ent) {
      let evt = ent || window.event;
      // 获取鼠标移动的坐标位置
      let ele_left = evt.clientX - point_x;
      //   设置水平方向最大/小值
      ele_left = Math.min(Math.max(0, ele_left), bottomLineWidth.value - mouseWidth.value)
      moveElement.style.transform = 'translateX(' + ele_left + 'px)';

      if (ele_left == 0) return
      if (ele_left >= (bottomLineWidth.value - mouseWidth.value)) return
      let onceMove = ent.pageX - baseX
      if (ent.pageX >= baseX) {
        // console.log('向右移动')
        window.scrollBy(0, onceMove / bottomLineWidth.value * currentHeight)
      } else {
        if (window.scrollY < (valueDomOffsetTop.value / window.devicePixelRatio)) {
          return
        }
        window.scrollBy(0, onceMove / bottomLineWidth.value * currentHeight)
      }
      baseX = ent.pageX
    }

    // 抬起停止移动
    document.onmouseup = function (event) {
      isMouseActive.value = false
      allowGsapContinue.value = true
      // 移除移动和抬起事件
      this.onmouseup = null;
      this.onmousemove = null;

    }
    // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动-使用的是第二种方式
    document.ondragstart = function (ev) {
      ev.preventDefault();
    }
    document.ondragend = function (ev) {
      ev.preventDefault();
    }
  }
}
</script>

<template>
  <div class="ht-cases-detail">
    <Head>
      <Title>{{ casesDetail['title']||'客户案例'}}</Title>
    </Head>
    <div class="ht-cases-detail-top" :style="{backgroundImage:`url('${casesDetail['bannerImage']}')`}">
      <div class="top-title">{{ casesDetail['title'] }}
      </div>
      <div class="top-subtitle">{{ casesDetail['subsidiaryTitle'] }}</div>
    </div>
    <div class="ht-cases-detail-box">
      <div class="company-sample-infos">
        <div class="logo">
          <img :src="casesDetail['logo']" alt="">
        </div>
        <div class="name">{{ casesDetail['title'] }}</div>
        <div class="tag" :style="{opacity:casesDetail['domain']?1:0}">{{ casesDetail['domain'] }}</div>
        <NuxtLink to="/cases" class="back">
          <span>返回列表</span>
          <img src="~/assets/images/cases/detail/back.png" alt="">
        </NuxtLink>
        <div class="line"></div>
        <NuxtLink :to="'/cases/'+asideDetail.id" v-if="asideDetail.title" class="next">下一篇：{{asideDetail.title}}</NuxtLink>
        <NuxtLink  v-if="!asideDetail.title" class="next">暂无下一篇</NuxtLink>
      </div>
      <div class="company-full-infos">
        <div class="company-name">{{ casesDetail['title'] }}</div>
        <div class="desc-picture">
          <div class="left">
            <div class="subtitle">{{ casesDetail['subsidiaryTitle'] }}</div>
            <div class="desc">
              {{ casesDetail['caseIntro'] }}
            </div>
          </div>
          <div class="right">
            <img :src="casesDetail['caseImage']" alt="">
          </div>
        </div>
        <div class="hr-line"></div>
        <div class="project-bg">
          <div class="title">项目背景</div>
          <div class="desc">{{ casesDetail['projectBackground'] }}
          </div>
        </div>
        <div class="hr-line"></div>
        <div class="project-content" v-if="casesDetail['projectContentList']" :style="{height:casesDetail['projectContentList'].length*4+'rem'}">
          <div class="sticky-content">
            <div class="section-headline">
              <div class="title">项目内容</div>
            </div>
            <div class="section-wrapper">
              <div class="section-card" v-for="item in casesDetail['projectContentList']">
                <div class="card-top">
                  <div class="icon">
                    <img :src="item['iconOrImage']">
                  </div>
                  <div class="type-name">{{ item.title }}</div>
                  <div class="txt">解决方案</div>
                </div>
                <div class="card-point">
                  <img src="~/assets/images/cases/detail/p-point.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hr-line"></div>
        <div class="project-app-scenarios" v-if="casesDetail['applicationScenariosList']" :style="{height:+casesDetail['applicationScenariosList'].length*4.95+'rem'}">
          <div class="sticky-content">
            <div class="section-headline">
              <div class="title">应用场景</div>
            </div>
            <div class="section-wrapper">
              <div class="section-card" v-for="item in casesDetail['applicationScenariosList']">
                <img :src="item['iconOrImage']" alt="">
                <div class="scenarios-item-title">{{ item.title }}</div>
                <div class="scenarios-item-desc">
                  {{item['intro']}}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="hr-line"></div>
        <div class="ht-cases-detail-project-value" :style="{height:casesDetail['projectValueList'].length*3.5+'rem'}" v-if="casesDetail['projectValueList']">
          <div class="sticky-content">
            <div class="section-headline">
              <div class="title">项目价值</div>
            </div>
            <div class="section-wrapper" :style="{width:casesDetail['projectValueList'].length/2*6.71+'rem'}">
              <div class="section-card project-value-card-item " v-for="(item,index) in casesDetail['projectValueList']">
                <div class="normal">
                  <div class="bg-num">{{ (index+1) > 9 ? index+1 : '0' + (index+1) }}</div>
                  <img src="~/assets/images/cases/detail/value.png" alt="">
                  <span class="txt">{{item.title}}</span>
                </div>
                <div class="hover">
                  <div class="left">
                    <img :src="item['iconOrImage']" alt="">
                  </div>
                  <div class="right">
                    <div class="title">{{item.title}}</div>
                    <div class="desc">{{item.intro}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="border-mouse">
              <div id="moveElement"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.ht-cases-detail {
  &-top {
    width: 24rem;
    height: 8.75rem;
    padding-top: 3.96rem;
    text-align: center;
    color: #FFFFFF;
    background-repeat: no-repeat;
    background-size: 24rem 8.75rem;

    .top-title {
      font-size: 0.7rem;
      font-weight: bold;
      text-shadow: 0 0 2px #999;
    }

    .top-subtitle {
      margin-top: 0.09rem;
      font-size: 0.33rem;
      font-weight: 400;
    }
  }

  &-box {
    background: url(~/assets/images/cases/detail/main-bg-2.png) no-repeat;
    background-size: 24rem 32.45rem;
    //background: linear-gradient(161deg, #e9edf5 0%, #edeff1 50%, #fff 100%);
    display: flex;
    padding-bottom: 0.9rem;
    padding-top: 1.81rem;

    .company-sample-infos {
      margin-left: 1.48rem;
      width: 6.73rem;
      height: 7.33rem;
      background: #FFFFFF;
      box-shadow: 0 0.04rem 0.34rem 0.01rem rgba(46, 106, 255, 0.11);
      border-radius: 0.19rem;
      position: sticky;
      top: 1.81rem;
      padding-left: 0.65rem;
      padding-top: 0.6rem;
      z-index: 9;

      .logo {
        img {
          max-width: 1.12rem;
          max-height: 1.13rem;
          object-fit: contain;
        }
      }

      .name {
        margin-top: 0.25rem;
        height: 0.54rem;
        font-size: 0.4rem;
        font-weight: bold;
        color: #111111;
      }

      .tag {
        display: inline-block;
        margin-top: 0.25rem;
        height: 0.63rem;
        padding: 0.15rem 0.33rem;
        border: 0.01rem solid #3AB5EC;
        border-radius: 0.06rem;
        font-size: 0.23rem;
        font-weight: 400;
        color: #3AB5EC;
      }

      .back {
        display: flex;
        align-items: center;
        margin-top: 1.9rem;
        font-size: 0.25rem;
        font-weight: 500;
        color: #999999;

        img {
          width: 0.3rem;
          height: 0.29rem;
          margin-left: 0.2rem;
        }
      }

      .line {
        position: relative;
        margin: 0.51rem 0 0.3rem 0;
        width: 5.55rem;
        height: 0.01rem;
        &::after{
          display: block;
          content:'';
          width: 5rem;
          height: 0.01rem;
          position: absolute;
          background: #D4D4D4;
          bottom: 0.2rem;
        }
      }

      .next {
        width: 5rem;
        display: block;
        font-size: 0.25rem;
        font-weight: 400;
        color: #999999;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
    }

    .company-full-infos {
      //height: 12.98rem;
      margin-left: 1.27rem;

      .company-name {
        font-size: 0.57rem;
        font-weight: bold;
        color: #000000;
      }

      .hr-line {
        width: 13.07rem;
        opacity: 1;
        border: 0.01rem solid #EBEBEB;
      }

      .desc-picture {
        display: flex;
        height: 5.35rem;

        .left {
          .subtitle {
            margin-top: 0.6rem;
            font-size: 0.35rem;
            font-weight: 500;
            color: #3AB5EC;
          }

          .desc {
            margin-top: 0.3rem;
            width: 6.31rem;
            font-size: 0.23rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.38rem;
          }
        }

        .right {
          margin-left: 1rem;

          img {
            width: 5.8rem;
            height: 3.66rem;
            border-radius: 0.13rem;
            margin-top: 0.6rem;
          }
        }
      }

      //项目背景
      .project-bg {
        width: 12.98rem;
        padding-top: 0.99rem;
        padding-bottom: 1rem;

        .title {
          font-size: 0.4rem;
          font-weight: bold;
          color: #000000;
        }

        .desc {
          margin-top: 0.26rem;
          font-size: 0.23rem;
          font-weight: 400;
          color: #333333;
          line-height: 0.38rem;
        }
      }

      //  项目内容
      .project-content {
        position: relative;
        padding-top: 0.99rem;
        height: 24rem;
        margin-bottom: 0.75rem;

        .sticky-content {
          position: sticky;
          height: 8.69rem;
          top: 2rem;
          overflow: hidden;

          .section-headline {
            .title {
              font-size: 0.4rem;
              font-weight: bold;
              color: #000000;
              margin-bottom: 0.43rem;
            }
          }

          .section-wrapper {
            height: 6.69rem;
            display: flex;
            background: url(~/assets/images/cases/detail/content-bg.png) repeat-x;
            background-size: 7.8375rem 2.106rem;
            background-position: 0 bottom;

            .section-card {
              width: 3.46rem;
              border-radius: 0.13rem;
              margin-right: 0.54rem;

              &:nth-child(odd) {
                .card-top {
                  margin-top: 2.15rem;
                }
              }

              &:nth-child(2n) {
                .card-top {
                  margin-top: 0.34rem;
                }
              }

              .card-top {
                height: 3.28rem;
                background: linear-gradient(180deg, #F8FAFF 0%, #FFFFFF 100%);
                box-shadow: 0rem 0.16rem 0.29rem 0.01rem rgba(46, 106, 255, 0.1);
                padding-top: 0.5rem;
                position: relative;
                border: 0.04rem solid #FFFFFF;
                border-radius: 0.13rem;


                &:after {
                  position: absolute;
                  content: "";
                  width: 0;
                  height: 0;
                  border-top: solid 0.46rem #fff;
                  border-right: solid 0.3rem transparent;
                  border-left: solid 0.3rem transparent;
                  bottom: -0.4rem;
                  left: 0;
                  right: 0;
                  margin: auto;

                }

                .icon {
                  text-align: center;
                  margin-bottom: 0.19rem;

                  img {
                    width: 1.3rem;
                    height: 1.3rem;
                  }
                }

                .type-name, .txt {
                  font-size: 0.25rem;
                  font-weight: 500;
                  color: #111111;
                  line-height: 0.33rem;
                  text-align: center;
                }
              }

              .card-point {
                margin-top: 0.79rem;
                text-align: center;

                img {
                  width: 0.4rem;
                  height: 0.4rem;
                }
              }
            }
          }
        }
      }

      //  应用场景
      .project-app-scenarios {
        margin-top: 1rem;
        height: 19rem;
        margin-bottom: 1rem;

        .sticky-content {
          position: sticky;
          top: 2rem;
          overflow: hidden;
        }

        .section-headline {
          .title {
            font-size: 0.4rem;
            font-weight: bold;
            color: #000000;
            margin-bottom: 0.38rem;
          }
        }

        .section-wrapper {
          display: flex;
          padding-bottom: 0.2rem;
          padding-left: 0.2rem;

          .section-card {
            width: 6.48rem;
            height: 5.86rem;

            border-radius: 0.13rem;
            margin-right: 0.38rem;
            padding-top: 0.34rem;
            padding-left: 0.38rem;

            &:hover {
              background: #FFFFFF;
              box-shadow: 0 0.09rem 0.25rem 0.01rem rgba(46, 106, 255, 0.11);
            }

            &:last-child {
              margin-right: 0;
            }

            img {
              width: 5.74rem;
              height: 3.03rem;
              background: #AFAFAF;
              border-radius: 0.13rem;
              margin-bottom: 0.46rem;
            }

            .scenarios-item-title {
              font-size: 0.33rem;
              font-weight: bold;
              color: #111111;
              line-height: 0.69rem;
            }

            .scenarios-item-desc {
              width: 5.74rem;
              font-size: 0.23rem;
              font-weight: 400;
              color: #999999;
              line-height: 0.33rem;
              text-overflow: ellipsis; // 超出用省略号显示
              overflow: hidden; // 超出的文本隐藏
              display: -webkit-box; // 作为弹性伸缩盒子模型显示
              -webkit-line-clamp: 3; // 显示的行
              -webkit-box-orient: vertical;
            }

            &:last-child {
              margin-right: 0;
            }
          }
        }

      }

      .ht-cases-detail-project-value {
        margin-top: 1rem;
        height: 19rem;
        margin-bottom: 1rem;

        .sticky-content {
          position: sticky;
          top: 2rem;
          overflow: hidden;
        }

        .border-mouse {
          position: relative;
          user-select: none;

          div {
            width: 4.55rem;
            height: 0.3925rem;
            margin-top: 0.89rem;
            background: url(~/assets/images/cases/detail/mouse.png) no-repeat;
            background-size: 4.55rem 0.3625rem;
          }

          &::after {
            content: '';
            position: absolute;
            width: 14.53rem;
            border: 0.01rem solid #EBEBEB;
            bottom: 0.19rem;
            left: 0;
            z-index: -1;
          }

          img {
            user-select: none;
            //pointer-events: none;
            width: 4.55rem;
            height: 0.3625rem;
            margin-top: 0.89rem;
            position: relative;
            z-index: 1;
          }
        }

        .section-headline {
          .title {
            font-size: 0.4rem;
            font-weight: bold;
            color: #000000;
            margin-bottom: 0.38rem;
          }
        }

        .section-wrapper {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          .project-value-card-item {
            margin-right: 0.36rem;
            margin-bottom: 0.25rem;
            width: 6.35rem;
            height: 1.89rem;
            background: #FFFFFF;
            border-radius: 0.06rem 0.06rem 0.06rem 0.06rem;
            border: 0.01rem solid #E0EEFF;
            position: relative;

            .normal {
              padding-top: 0.1px;

              .bg-num {
                position: absolute;
                left: 0.21rem;
                top: 0;
                font-size: 1.39rem;
                font-weight: bold;
                color: #E7F0FC;
                line-height: 2rem;
              }

              img {
                position: absolute;
                z-index: 2;
                width: 0.21rem;
                height: 0.27rem;
                left: 0.75rem;
                top: 0.9rem;
              }

              .txt {
                position: absolute;
                top: 0.8rem;
                left: 1.2rem;
                font-size: 0.3rem;
                font-weight: 500;
                color: #556795;
              }
            }

            .hover {
              display: none;
            }

            &:hover {
              .normal {
                display: none;
              }

              .hover {
                transform: scale(1.05);
                width: 6.35rem;
                height: 1.89rem;
                background: url(~/assets/images/cases/detail/value-active-bg.jpg) no-repeat;
                background-size: 6.35rem 1.89rem;
                border-radius: 0.06rem;
                display: flex;

                .left {
                  margin-left: 0.4rem;
                  margin-top: 0.56rem;
                  margin-right: 0.26rem;

                  img {
                    width: 0.66rem;
                    height: 0.75rem;
                  }
                }

                .right {
                  width: 4.39rem;
                  color: #FFFFFF;

                  .title {
                    margin-top: 0.35rem;
                    font-size: 0.33rem;
                    font-weight: 500;
                    margin-bottom: 0.08rem;
                  }

                  .desc {
                    font-size: 0.18rem;
                    font-weight: 400;
                    line-height: 0.33rem;
                    text-overflow: ellipsis; // 超出用省略号显示
                    overflow: hidden; // 超出的文本隐藏
                    display: -webkit-box; // 作为弹性伸缩盒子模型显示
                    -webkit-line-clamp:2; // 显示的行
                    -webkit-box-orient: vertical;
                  }
                }

              }
            }
          }
        }
      }
    }
  }
}
</style>
